<template>
  <!-- 视频页 -->
  <div class="VideoView">
    <van-tabs v-model="active" @click="amendFeeds">
      <van-tab title="推荐">
        <recommend-video
          @upcount="upcount"
          @amend="amendAlreadyUp"
          :feedslist="feedsList"
        ></recommend-video>
      </van-tab>
      <van-tab title="预告片">
        <recommend-video
          @upcount="upcount"
          @amend="amendAlreadyUp"
          :feedslist="feedsList"
        ></recommend-video>
      </van-tab>
      <van-tab title="热片解读">
        <recommend-video
          @upcount="upcount"
          @amend="amendAlreadyUp"
          :feedslist="feedsList"
        ></recommend-video
      ></van-tab>
      <van-tab title="说电影">
        <recommend-video
          @upcount="upcount"
          @amend="amendAlreadyUp"
          :feedslist="feedsList"
        ></recommend-video
      ></van-tab>
      <van-tab title="娱乐">
        <recommend-video
          @upcount="upcount"
          @amend="amendAlreadyUp"
          :feedslist="feedsList"
        ></recommend-video
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import RecommendVideo from "../components/RecommendVideo.vue";
export default {
  components: { RecommendVideo },
  data() {
    return {
      active: 0,
      feedsList: [],
      // 类型id
      feedChannelId: 4,
      countshow: false, // 判断是否点赞
      goodId: [],
    };
  },
  methods: {
    getFeeds() {
      if (this.feedChannelId == 4) {
        // 如果等于4的话就不需要feedChannelId
        this.axios.get(`/video/0?channelId=4&offset=0`).then((re) => {
          console.log(re);
          this.feedsList = re.feeds;
        });
      } else {
        // 如果不是4的话就跟着改变
        this.axios
          .get(
            `/video/0?channelId=4&feedChannelId=${this.feedChannelId}&offset=0`
          )
          .then((re) => {
            console.log(re);
            this.feedsList = re.feeds;
          });
      }
    },
    amendFeeds(index) {
      console.log(index);
      if (index == 0) {
        this.feedChannelId = 4;
      } else if (index == 1) {
        this.feedChannelId = 1067226;
      } else if (index == 2) {
        this.feedChannelId = 1331498;
      } else if (index == 3) {
        this.feedChannelId = 1074953;
      } else if (index == 4) {
        this.feedChannelId = 1307354;
      }
      this.getFeeds();
    },
    // 修改视频状态
    amendAlreadyUp(index) {
      this.feedsList.forEach((item) => {
        item.alreadyUp = false;
      });
      this.feedsList[index].alreadyUp = true;
    },
    // 点赞
    upcount(feed) {
      // 判断是否存在，如果不存在就push进去
      if (!this.goodset(feed.id)) {
        feed.upCount += 1;
        this.goodId.push(feed.id);
      } else {
        for (let i = 0; i < this.goodId.length; i++) {
          if (this.goodId[i] == feed.id) {
            feed.upCount -= 1;
            this.goodId.splice(i, 1);
          }
        }
      }
    },

    // if (!this.countshow) {
    //   this.countshow = true;
    //   feed.upCount += 1;
    // } else {
    //   this.countshow = false;
    //   feed.upCount -= 1;
    // }
    // },
    // 判断是否存在
    goodset(id) {
      var set = new Set(this.goodId);
      if (set.has(id)) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    this.getFeeds();
  },
};
</script>

<style scoped>
.van-tabs__wrap {
  display: flex;
  justify-content: left;
  align-items: center;
  padding-top: 0.1rem;
}
.van-tabs__nav--line {
  width: 90vw;
  font-size: 14px;
}
.van-tab {
  width: 20px;
}
.van-tab__text {
  font-size: 16px;
  color: #333;
}
</style>
<style >
.VideoView .van-tabs__line {
  background-color: #3c9fe6;
}
</style>